<template>
	<view class="nav-bar">
		<view class="status_bar" :style="{height:top}">
			<!-- 这里是状态栏 -->
		</view>
		<view class="u-flex nav-body">
			<u-icon name="red-packet" color="#fff" size="55"></u-icon>
			<view class="search-box">
				<u-search :height="height" placeholder="搜索你喜欢的商品" @click="toSearch" v-model="keyword" :disabled="true"
					:show-action="false">
				</u-search>
			</view>
			<!-- #ifdef APP-PLUS || H5 -->
				<u-icon name="chat" color="#fff" size="60"></u-icon>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	export default {
		name: "nav-bar",
		props: ['title'],
		data() {
			return {
				keyword:'',
				top:'',
				height:64
			};
		},
		mounted() {
			//#ifndef APP-PLUS || H5
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.top=menuButtonInfo.top + 'px';
			this.height=menuButtonInfo.height * 2 - 4;
			//#endif
		},
		methods: {
			toSearch() {
				uni.navigateTo({
					url: '../search/search'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.nav-bar {
		width: 100%;
		background-color: #fc4a17;
	}

	.nav-body {
		border: none;
		width: 100%;
		padding: 0 20rpx 20rpx 20rpx;
		/* #ifdef APP-PLUS || H5 */
		padding: 20rpx;
		/* #endif */
	}

	.search-box {
		margin: 0 20rpx;
		// flex: 1;
		flex: none;
		width: 60%;
		/* #ifdef APP-PLUS || H5 */
		flex: 1;
		/* #endif */
	}
</style>
